<template>
  <div class="svg-wrapper">
    <svg ref="svgElement">
      <defs>
        <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
          <path
            d="M 20 0 L 0 0 0 20"
            fill="none"
            stroke="#ccc"
            stroke-width="0.5"
          />
        </pattern>
      </defs>
      <rect id="grid-rect" width="100%" height="100%" fill="url(#grid)" />

      <!-- 边界框 -->
      <rect
        v-if="boundingBox.show"
        :x="boundingBox.x"
        :y="boundingBox.y"
        :width="boundingBox.width"
        :height="boundingBox.height"
        fill="none"
        stroke="#409eff"
        stroke-width="2"
        stroke-dasharray="5,5"
      />

      <!-- 随机生成的元素 -->
      <g v-for="(element, index) in elements" :key="index">
        <rect
          v-if="element.type === 'rect'"
          :x="element.x"
          :y="element.y"
          :width="element.width"
          :height="element.height"
          :fill="element.color"
          stroke="#333"
          stroke-width="1"
        />
        <circle
          v-else-if="element.type === 'circle'"
          :cx="element.cx"
          :cy="element.cy"
          :r="element.r"
          :fill="element.color"
          stroke="#333"
          stroke-width="1"
        />
        <polygon
          v-else-if="element.type === 'triangle'"
          :points="element.points"
          :fill="element.color"
          stroke="#333"
          stroke-width="1"
        />
      </g>
    </svg>
    <div class="actions">
      <button @click="createRandomElement">创建随机元素</button>
      <button @click="calculateBoundingBox">框选边界</button>
      <button @click="resetAll">重置</button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      elements: [],
      boundingBox: {
        show: false,
        x: 0,
        y: 0,
        width: 0,
        height: 0
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 创建随机元素
    createRandomElement() {
      const svgRect = this.$refs.svgElement.getBoundingClientRect()
      const svgWidth = svgRect.width
      const svgHeight = svgRect.height

      const elementTypes = ['rect', 'circle', 'triangle']
      const colors = [
        '#ff6b6b',
        '#4ecdc4',
        '#45b7d1',
        '#96ceb4',
        '#feca57',
        '#ff9ff3'
      ]

      const type = elementTypes[Math.floor(Math.random() * elementTypes.length)]
      const color = colors[Math.floor(Math.random() * colors.length)]

      let element

      switch (type) {
        case 'rect':
          const width = Math.random() * 80 + 20
          const height = Math.random() * 80 + 20
          element = {
            type: 'rect',
            x: Math.random() * (svgWidth - width - 40) + 20,
            y: Math.random() * (svgHeight - height - 40) + 20,
            width: width,
            height: height,
            color: color
          }
          break

        case 'circle':
          const radius = Math.random() * 30 + 10
          element = {
            type: 'circle',
            cx: Math.random() * (svgWidth - radius * 2 - 40) + 20 + radius,
            cy: Math.random() * (svgHeight - radius * 2 - 40) + 20 + radius,
            r: radius,
            color: color
          }
          break

        case 'triangle':
          const size = Math.random() * 40 + 20
          const x = Math.random() * (svgWidth - size - 40) + 20
          const y = Math.random() * (svgHeight - size - 40) + 20
          element = {
            type: 'triangle',
            points: `${x},${y + size} ${x + size / 2},${y} ${x + size},${
              y + size
            }`,
            color: color,
            // 保存原始坐标用于计算边界
            x: x,
            y: y,
            width: size,
            height: size
          }
          break
      }

      this.elements.push(element)
      this.boundingBox.show = false
    },

    // 计算所有元素的边界框
    calculateBoundingBox() {
      if (this.elements.length === 0) {
        alert('请先创建一些元素！')
        return
      }

      let minX = Infinity
      let minY = Infinity
      let maxX = -Infinity
      let maxY = -Infinity

      this.elements.forEach(element => {
        let elementMinX, elementMinY, elementMaxX, elementMaxY

        switch (element.type) {
          case 'rect':
            elementMinX = element.x
            elementMinY = element.y
            elementMaxX = element.x + element.width
            elementMaxY = element.y + element.height
            break

          case 'circle':
            elementMinX = element.cx - element.r
            elementMinY = element.cy - element.r
            elementMaxX = element.cx + element.r
            elementMaxY = element.cy + element.r
            break

          case 'triangle':
            elementMinX = element.x
            elementMinY = element.y
            elementMaxX = element.x + element.width
            elementMaxY = element.y + element.height
            break
        }

        minX = Math.min(minX, elementMinX)
        minY = Math.min(minY, elementMinY)
        maxX = Math.max(maxX, elementMaxX)
        maxY = Math.max(maxY, elementMaxY)
      })

      // 添加一些边距
      const margin = 5
      this.boundingBox = {
        show: true,
        x: minX - margin,
        y: minY - margin,
        width: maxX - minX + margin * 2,
        height: maxY - minY + margin * 2
      }
    },

    // 重置所有元素和边界框
    resetAll() {
      this.elements = []
      this.boundingBox.show = false
    }
  },
  filters: {}
}
</script>

<style scoped lang="scss">
.svg-wrapper {
  height: 100%;
  position: relative;
  svg {
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    height: 100%;
    width: 100%;
  }
  .actions {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;

    button {
      padding: 8px 16px;
      border: none;
      background-color: #409eff;
      color: #fff;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;

      &:hover {
        background-color: #66b1ff;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }

      // 重置按钮特殊样式
      &:last-child {
        background-color: #f56c6c;
        &:hover {
          background-color: #f78989;
        }
      }
    }
  }
}
</style>
